<template>
	<div class="menu">
		<li>
			<el-link :class="$route.name == 'ChainAtlas' ? 'active' : ''" href="/#/chain/atlas" :underline="false">产业链图谱</el-link>
		</li>
		<li>
			<el-link :class="$route.name == 'ChainAnalysis' ? 'active' : ''" href="/#/chain/analysis" :underline="false">现状分析图</el-link>
		</li>
		<li><el-link :class="$route.name == 'ChainPanorama' ? 'active' : ''" href="/#/chain/panorama" :underline="false">全景图</el-link></li>
		<li><el-link :class="$route.name == 'ChainThermodynamics' ? 'active' : ''" href="/#/chain/thermodynamics" :underline="false">热力图</el-link></li>
		<li><el-link :class="$route.name == 'ChainBusiness' ? 'active' : ''" href="/#/chain/business" :underline="false">招商地图</el-link></li>
		<li><el-link :class="$route.name == 'ChainCompanyList' ? 'active' : ''" href="/#/chain/company/list" :underline="false">企业库</el-link></li>
		<li><el-link :class="$route.name == 'ChainInnovate' ? 'active' : ''" href="/#/chain/innovate" :underline="false">创新库</el-link></li>
		<li><el-link :class="$route.name == 'ChainInvest' ? 'active' : ''" href="/#/chain/invest" :underline="false">投融资库</el-link></li>
		<li><el-link :class="$route.name == 'ChainProject' ? 'active' : ''" href="/#/chain/project" :underline="false">招商项目库</el-link></li>
		<li><el-link :class="$route.name == 'ChainMeeting' ? 'active' : ''" href="/#/chain/meeting" :underline="false">商会协会库</el-link></li>
		<li><el-link :class="$route.name == 'ChainCounty' ? 'active' : ''" href="/#/chain/county" :underline="false">乡贤库</el-link></li>
		<li><el-link :class="$route.name == 'ChainClue' ? 'active' : ''" href="/#/chain/clue" :underline="false">线索池</el-link></li>
		<li><el-link :class="$route.name == 'ChainPolicy' ? 'active' : ''" href="/#/chain/policy" :underline="false">政策池</el-link></li>
		<li><el-link :class="$route.name == 'ChainPerson' ? 'active' : ''" href="/#/chain/person" :underline="false">人才池</el-link></li>
		<li><el-link :class="$route.name == 'ChainOrganization' ? 'active' : ''" href="/#/chain/organization" :underline="false">服务机构池</el-link></li>
		<li><el-link :class="$route.name == 'ChainReport' ? 'active' : ''" href="/#/chain/report" :underline="false">报告池</el-link></li>
	</div>
</template>
<style lang="scss" scoped>
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	li {
		list-style: none;
		display: inline-block;
		line-height: 45px;
		text-align: center;
		padding-bottom: 7px;
		margin: 0 12px;
		.el-link {
			color: #333 !important;
			font-size: 16px;
			border-bottom: #1890ff00 3px solid;
		}
		.el-link:hover {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
		.active {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
	}
}
</style>
